<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>list.jsp</title>


<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
#body{
	font-family:'Nanum Gothic', sans-serif;
}
#hollDiv{
	
}
#boardDiv{
	width: 800px;
	height: 300px;
	margin: 10px;
	padding: 20px;
	border: 3px solid #aaaaaa;
	border-radius:30px 15px 60px 10px;

}

#guestDiv,#memberDiv{
	width: 380px;
	height: 300px;
	margin: 10px;
	padding: 20px;
	border: 3px solid #aaaaaa;
	border-radius:30px 15px 60px 10px;
}

#groupFind{
	text-align: left;
	margin: 10px;
}

#boardFind{
	width:	150px;
	border: 3px solid #2E64FE;
/* 	#A9D0F5; */
	height:	20px;
	font-size:10pt;
	font-family:'Nanum Gothic', sans-serif;
	border-radius:10px;
	color: #aaaaaa;
}

#btnBoardFnd{
	font-family:'Nanum Gothic', sans-serif;
	font-size:10pt;
	font-weight: bold;
	color: #2E64FE;
	
	width: 50px;
	border: 3px solid #2E64FE;
	height:	25px;
	
	border-radius:10px;
	background-color: #A9D0F5;
}

h3{
	font-family:'Nanum Gothic', sans-serif;
}


</style>

<script>
function init(){
/* 	if(window.ActiveXObject){
		alert('브라우저를 업그레이드 하세요..');
		return;
	}
	 */
	xhr	= new XMLHttpRequest();//callback함수를 만들었다.
	
	
	var btnB= document.querySelector("#btnBoardFnd");
	var btnG= document.querySelector("#btnGuestFnd");
	var btnM= document.querySelector("#btnMemberFnd");
	
 	var divB= document.querySelector("#boardDiv");
	var divG= document.querySelector("#guestDiv");
	var divM= document.querySelector("#memberDiv");
	
	btnB.onclick=function(){
		/* console.log('list','버튼1이 클릭됨'); */
		
		xhr.onreadystatechange=boardFunc;
		
		var inputB= document.querySelector("#boardFind").value;
		var url='../board/list_ajax.jsp';
		
		
		xhr.open('post', url, true);//비동기 방식 형태로 xhr(XMLHttpRequest)을 실행 시키겠다
		
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xhr.send('find='+inputB);

		
	};
	
	
	
	btnM.onclick=function(){
	/* 	console.log('list','버튼2이 클릭됨'); */
		xhr.onreadystatechange=memberFunc;
		var inputM= document.querySelector("#memberFind").value;
		var url='../member/list_ajax.jsp?find='+inputM;
		xhr.open('post', url, true);//비동기 방식 형태로 xhr(XMLHttpRequest)을 실행 시키겠다
		xhr.send('find='+inputM);

	};
	
	
	
	btnG.onclick=function(){
	/* console.log('list','버튼3이 클릭됨'); */
		
		xhr.onreadystatechange=guestFunc;
		var inputG= document.querySelector("#guestFind").value;
		var url='../guest/list_ajax.jsp?find='+inputG;
		xhr.open('get', url, true);//비동기 방식 형태로 xhr(XMLHttpRequest)을 실행 시키겠다
		xhr.send('find='+inputG);

	};
	
}	


function boardFunc(){
	var divB=document.querySelector("#boardDiv");
	
	if(xhr.status==200 && xhr.readyState==4){
		divB.innerHTML=xhr.responseText;
		
	}
}



function guestFunc(){
	var divB=document.querySelector("#guestDiv");
	
	if(xhr.status==200 && xhr.readyState==4){
		divB.innerHTML=xhr.responseText;
		
	}
	
}


function memberFunc(){
	var divB=document.querySelector("#memberDiv");
	
	if(xhr.status==200 && xhr.readyState==4){
		divB.innerHTML=xhr.responseText;
		
	}
	
}



</script>
</head>
<body>
<div>


		<div id='hollDiv'>		
			<div id='groupFind'>
				<li><h3>게시판</h3>

					<input type='text' id='boardFind'>
					<input type='button' value='Find' id='btnBoardFnd'><br/>
				</div>
			<div id='boardDiv'></div>
		</div>



			
			<div id='groupFind'>
				<li><h3>방명록</h3>

					<input type='text' id='guestFind'>
					<input type='button' value='Find' id='btnGuestFnd'><br/>
				</div>
			<div id='guestDiv'></div>

		

			<div id='groupFind'>
				<li><h3>회원</h3>

					<input type='text' id='memberFind'>
					<input type='button' value='Find' id='btnMemberFnd'><br/>
				</div>
			<div id='memberDiv'></div>



<script>init();</script>

</div>
</body>
</html>